/*
1.找到对应的图片
2.剪裁配置项
3.调用 cropper 方法
*/
// 1.找到对应的图片
let image = $('#image')
// 2.剪裁配置项
let option = {
  //设置剪裁的比例
  aspectRatio: 1,
  //指定预览区
  preview: '.img-preview'
}
// 3.调用 cropper 方法
image.cropper(option)

//-------------------点击上传-----------------
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click')
})

//-------------------上传图片,更换裁剪区图片---------------------
$('#file').on('change', function () {
  //获取图片的url地址
  if (this.files.length > 0) {
    //找到文件对象
    let fileObj = this.files[0]
    //创建 url
    let url = URL.createObjectURL(fileObj)
    // 更换裁剪区的图片
    //方法1
    // image.cropper('destory').attr('src'.url).cropper(option)
    // 方法2
    image.cropper('replace', url)
  }
})


//------------------------完成更换-------------------
// 点击 确认 按钮 --> 裁剪图片--> 转换成 base64 格式 --> 提交给接口
$('button:contains("确定")').on('click', function () {
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
  // toDataURL('image/jpeg',0.3)指定为jpeg格式,设置图片质量 只有jpeg 才可以设置图片质量
  let base64 = canvas.toDataURL()
  axios.post('/my/user/avatar',`avatar=${encodeURIComponent(base64)}`).then(res=>{
    let {status , message} = res.data
    if(status === 0){
      layer.msg(message)
      window.parent.getUserInfo()
    }
  })
})